import React from 'react';
import { Input, Modal, Form,Switch,Spin,Select,TreeSelect,Icon } from 'antd';
import { connect } from 'dva';
import { FormComponentProps } from 'antd/es/form';
import IconPreview from '@/components/IconPreview';
const FormItem = Form.Item;
class Update extends React.Component {
  state = {
    IconPreviewVisible:false,
  };
  /**
   * 前置方法
   */
  componentDidMount = () =>{
    //console.log('this.props',this.props);
    
  }
  /**
   * 本函数用户modal 点击确定之后把form表单里面的值传回去
   */
  okHandle = () => {
    this.props.form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.props.form.resetFields();
      this.props.onSubmit(fieldsValue);
    });
  };
  getOption = list => {
    const { Option } = Select;
    if (!list || list.length < 1) {
      return (
        <Option key={0} value={0}>
          没有找到选项
        </Option>
      );
    }
    
    //console.log(typeof list);
    return list.map(item => (
      <Option key={item.id} value={item.id}>
        {item.name}
        
      </Option>
    ));
  };
  getParentListOption = () => {
    const { ParentData } = this.props;
    return this.getOption(Array.from(ParentData));
  };
  IconPreviewHandleCancel = ()=>{
    this.setState({
      IconPreviewVisible: false,
    });
  }
  showIconViewModal = ()=>{
    this.setState({
      IconPreviewVisible: true,
    });
  }
  render() {
    //console.log('this.props.ParentData',this.props.ParentData);
    return (
      <>
      <Modal
        destroyOnClose
        title={this.props.modalTitle}
        visible={this.props.modalVisible}
        onOk={this.okHandle}
        confirmLoading={this.props.confirmLoading}
        onCancel={() => this.props.handleModalVisible()}
      >
        <Spin spinning={this.props.modalLoading}>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="语言包名称">
          {this.props.form.getFieldDecorator('name', {
            initialValue:this.props.menuData.name,
            rules: [{ required: true, message: '请输入最少2个最多35个字符的值', min: 2 ,max:35}],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        {/* <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="父级路由">
            <div>
              {this.props.form.getFieldDecorator('parent_id', {
                initialValue: this.props.menuData.parent_id,
                rules: [{ required: false, message: '请选择父菜单' }],
              })(
                <Select showSearch placeholder="请选择" disabled={false} style={{ width: '100%' }}>
                  {
                    this.getParentListOption()
                  }
                  
                </Select>
              )}
            </div>
        </FormItem> */}
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="父级路由">
             {this.props.form.getFieldDecorator('parent_id', {
                initialValue: this.props.menuData.parent_id,
                rules: [{ required: false, message: '请选择父菜单' }],
              })(
                <TreeSelect
                  style={{ width: 300 }}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={Object.keys(this.props.ParentData).map(key=> this.props.ParentData[key])}
                  // loadData={(e)=>{
                  //   console.log(e);
                  // }}
                  placeholder="Please select"
                  treeDefaultExpandAll
                />
              )}
            
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="路径">
          {this.props.form.getFieldDecorator('path', {
            initialValue:this.props.menuData.path,
            rules: [{ required: true, message: '请输入至少3个字符最多35个字符的路劲！', min: 3 ,max:35}],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="图标">
          {this.props.form.getFieldDecorator('icon', {
            initialValue:this.props.menuData.icon,
            rules: [{ required: false, message: '请输入至少3个字符最多35个字符的图标！', min: 3 ,max:35}],
          })(
            <Input.Search
                      prefix={
                        <Icon type={this.props.menuData.icon?this.props.menuData.icon:'setting'} />
                      }
                      placeholder="请选择菜单图标"
                      onSearch={this.showIconViewModal}
                      enterButton
                    />
          )}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="组件地址">
          {this.props.form.getFieldDecorator('component', {
            initialValue:this.props.menuData.component,
            rules: [{ required: true, message: '请输入至少3个字符最多35个字符的组件地址！', min: 3 ,max:35}],
          })(<Input placeholder="请输入" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="是否隐藏子路由">
          {this.props.form.getFieldDecorator('hideChildrenInMenu', {
            valuePropName:'checked',
            initialValue:this.props.menuData.hideChildrenInMenu,
          })(<Switch checkedChildren="显示" unCheckedChildren="隐藏" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="是否隐藏本路由">
          {this.props.form.getFieldDecorator('hideInMenu', {
            valuePropName:'checked',
            initialValue:this.props.menuData.hideInMenu,
          })(<Switch checkedChildren="显示" unCheckedChildren="隐藏" />)}
        </FormItem>
        <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="是否启用">
          {this.props.form.getFieldDecorator('status', {
            valuePropName:'checked',
            initialValue:this.props.menuData.status,
          })(<Switch checkedChildren="启用" unCheckedChildren="禁用" />)}
        </FormItem>
        </Spin>
      </Modal>
      <Modal width={900} visible={this.state.IconPreviewVisible} onCancel={this.IconPreviewHandleCancel} footer={null}>
        <IconPreview onCancel={this.IconPreviewHandleCancel} />
      </Modal>
    </>
    );
  }
}

export default Update;
